<template>
  <div class="gy-home">
    <section class="gy-top">
      <img class="gy-logo" src="../image/logo.png" />
      <div class="gy-collect-data">
        <div class="collect-sku-count">{{collectCount.collectSkuCount}}</div>
        <div class="collect-order-count">{{collectCount.collectOrderCount}}</div>
      </div>
    </section>
  </div>
</template>

<script>
  import {mapState, mapGetters, mapActions} from 'vuex'

  export default {
    name: "Home",
    data() {
      return {
        tHeader: ['名称', '价格', '剩余库存', '操作'],
        currentProducts: [],
      }
    },
    computed: {
      ...mapState(['collectCount']),
      ...mapGetters(['allProducts'])
    },
    // 为了避免表单直接修改store中的数据，需要使用watch模拟双向绑定
    watch: {
      allProducts: {
        handler (val) {
          this.currentProducts = JSON.parse(JSON.stringify(this.allProducts))
        },
        deep: true
      }
    },
    created() {
      console.log(this)
      this.collectDonateCount();
    },
    methods: {
      ...mapActions([
        'collectDonateCount'
      ])
    }
  }
</script>

<style lang="less" scoped>
  @import '../less/base';
  @import "../less/home";
</style>
